<template>
  <div>
    <a-modal v-model:visible="visible" :footer="false" width="60%">
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <template #icon="{ record }">
          <a-image :src="record.icon ? $tool.showFile(record.icon):''" height="30" width="30" />
        </template>
      </ma-crud>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import api from '@/api/prm/activity_step.js'
import {Message} from "@arco-design/web-vue";

const visible = ref(false)
const crudRef = ref()

const open = () => {
  visible.value = true
  crudRef.value.requestData()
}

const crud = reactive({
  autoRequest: false,
  api: api.list,
  showIndex: false,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 180,
  add: {show: true, api: api.add},
  edit: {show: true, api: api.update},
  delete: {show: true, api: api.delete},
  formOption: {viewType: 'modal', width: 800},
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {title: '流程标题', dataIndex: 'title', commonRules: [{required: true, message: '必须填流程标题'}]},
  {title: '流程归属', dataIndex: 'type', formType: 'select', dict: {data: [{label: '项目信息', value: 1}, {label: '教程技巧', value: 2}], translation: true}},
  {title: '流程ICON', dataIndex: 'icon', formType: 'upload', width: 50, type:'image'},
  {title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false, search: false},
])

defineExpose({ open })

</script>
